/**
 * @summary: 评论与进度，复用容器
 * @author: lixinxiang@vv.cn
 */

import React from 'react';
import { Drawer, Timeline, Empty, Spin } from 'antd';
import { connect } from 'umi';
import { Comment } from '../components';

// const PROCESS_MAP = {
//     0: '产品进行中',
//     1: '研发进行中',
//     2: '测试进行中',
//     3: '已结束'
// };
const getcolor = name => {
    if (name === '待办') {
        return '#BFBFBF';
    }
    if (name === '完成') {
        return '#4DCB73';
    }
    return '#FFA22D';
};

const Process = ({ dispatch, feedback, loading }) => {
    const { processVisible, record, comments } = feedback;

    const handleCloseDrawer = () => {
        dispatch({ type: 'feedback/processVisible', payload: false });
    };

    const progressTitle = (
        <div
            style={{
                height: 24,
                lineHeight: '24px',
                padding: '0 8px',
                display: 'inline-block',
                backgroundColor: getcolor(record.bugStatus),
                color: '#fff',
                marginBottom: 12
            }}
        >
            {record.bugStatus || '无'}
        </div>
    );

    const renderComments = () => {
        if (loading) {
            return (
                <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
                    <Spin />
                </div>
            );
        }

        if (comments.length === 0) {
            return <Empty description="暂无评论" />;
        }

        return (
            <>
                <Timeline progressDot current={0} direction="vertical">
                    {comments.map((item, index) => {
                        const color = index === 0 ? 'rgba(255, 168, 8, 1)' : 'gray';
                        return (
                            <Timeline.Item key={item.id} color={color}>
                                <Comment data={{ ...item, color }}></Comment>
                            </Timeline.Item>
                        );
                    })}
                </Timeline>
            </>
        );
    };

    return (
        <Drawer
            title="反馈详情"
            placement="right"
            width={592}
            onClose={handleCloseDrawer}
            visible={processVisible}
            destroyOnClose
        >
            <div style={{ marginBottom: 10, display: 'flex' }}>
                反馈标题：<span style={{ flex: 1 }}>{record.frontTitle}</span>
            </div>
            <div style={{ marginBottom: 10, display: 'flex' }}>
                反馈详情：
                <span
                    style={{
                        display: 'inline-block',
                        wordBreak: 'break-all',
                        whiteSpace: 'pre-wrap',
                        verticalAlign: 'top',
                        flex: 1
                    }}
                >
                    {record.bugDesc}
                </span>
            </div>
            <div style={{ marginBottom: 10 }}>反馈进展：{progressTitle}</div>
            <div style={{ marginLeft: 70 }}>{renderComments()}</div>
        </Drawer>
    );
};

export default connect(({ feedback, loading }) => ({ feedback, loading: loading.effects['feedback/fetchProgress'] }))(
    Process
);
